<template>
    <ul class="button-group">
        <li @click="$router.push('/shop/order-adds')">
            <p v-if="sign==0"><img src="../../../../static/images/wallet-green.png" /></p>
            <p v-else><img src="../../../../static/images/wallet-ash.png" alt=""></p>
            <p :class="sign==0?'selectP':''">极速估价</p>
        </li>
        <li @click="eventClickJumpOperate('commissioner')">
            <p v-if="sign==1"><img src="../../../../static/images/user-green.png" /></p>
            <p v-else><img src="../../../../static/images/user-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">联系专员</p>
        </li>
        <li @click="eventClickJumpOperate('company')">
            <p v-if="sign==1"><img src="../../../../static/images/salesman.png" /></p>
            <p v-else><img src="../../../../static/images/salesman-black.png" alt=""></p>
            <p :class="sign==1?'selectP':''">联系公司</p>
        </li>

        <li @click="$router.push('/public/personalData')">
            <p v-if="sign==1"><img src="../../../../static/images/user-green.png" /></p>
            <p v-else><img src="../../../../static/images/user-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">个人中心</p>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
    .button-group {
        padding: 0.5rem 0rem;
        position: fixed;
        width: 100;
        left: 0rem;
        right: 0rem;
        bottom: 0;
        z-index: 1;
        display: flex;
        box-shadow:0 -.1rem 0 0 rgba(221,221,221,1);
        background: #ffffff;

        li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            img {
                width: 20%;
                /*height: 2.5rem;*/
            }

            p {
                margin: 0rem;
                padding: 0rem;
                flex: 0 0 100%;
                text-align: center;
                font-size: 1.2rem;
                color: #999999;
            }
            .selectP{
                color: #00CC00;
            }

            p:last-child {
                margin-top: 0.2rem;
            }
        }
    }

    .fix-location {
        position: relative;
        right: -3px;
    }
</style>

<script>
    export default {
        // route => path | name, data
        props: ['dataset','index','identity'],
        data() {
            return {
                sign: 0
            }
        },
        mounted() {
            this.sign = this.index;
        },
        methods: {
            eventClickJumpOperate(key) {
                switch (key) {
                    case 'company':
                        window.location.href = 'tel://' + this.$store.state.options.user.oda.zhuguanphone;
                        break;
                    case 'commissioner':
                    default:
                        window.location.href = 'tel://' + this.$store.state.options.user.oda.upphone;
                        break;
                }
            }
        }
    }
</script>
